<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>download</title>
    <style>
        img {
            width: 200px;
        }

        .image {
            margin: 10px;
            padding: 5px;
            display: inline-block;
            position: relative;
            border: 1px solid gainsboro;
            border-radius: 5px;
        }

        .image:hover {
            border: 1px solid black;
        }

        .checkbox-container {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
<h2>Download as soon as possible!</h2>
<h1>{{ data.img_path }}</h1>
<form id="downloadForm" action="/download" method="post" onsubmit="return validateForm()">
    <input type="hidden" name="img_path" value="{{ data.img_path }}">
    <div>
        <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
        <label for="selectAll">Select All</label>
        <button type="submit">download</button>
    </div>

    {% for path in data.file_paths %}
    <div class="image">
        <div class="checkbox-container">
            <input type="checkbox" name="selectedImages[]" value="{{ path }}">
        </div>

        <img src="/{{ path }}" alt="Image" onclick="selectCheckbox('{{ path }}')">

    </div>
    {% endfor %}
    <br>

</form>


<script>
    // 切换全选/取消全选状态
    function toggleSelectAll() {
        var checkboxes = document.querySelectorAll('input[name="selectedImages[]"]');
        var selectAllCheckbox = document.getElementById("selectAll");
        checkboxes.forEach(function (checkbox) {
            checkbox.checked = selectAllCheckbox.checked;
        });
    }

    // 选中图片对应的复选框
    function selectCheckbox(imageUrl) {
        // 找到对应图片的复选框
        var checkbox = document.querySelector('input[value="' + imageUrl + '"]');
        console.log(checkbox)
        // 切换复选框的选中状态
        checkbox.checked = !checkbox.checked;
    }

    function validateForm() {
        var selected = document.querySelectorAll('input[name="selectedImages[]"]:checked');

        // 检查选择的文件数量
        if (selected.length === 0) {
            alert("请选择至少一张图片");
            return false;
        }

        return true;
    }
</script>
</script>
</body>
</html>